<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                $("#btn").click(function () {

                    var username=$("input[name='username']").val();
                    var password=$("input[name='password']").val();
                    var phone=$("input[name='phone']").val();
                    var address=$("input[name='address']").val();
                    console.log(username);
                    var str="username="+username+"&password="+password+"&phone="+phone+"&address="+address;
                    // 序列化操作可以使得用户能够直接从指定表单所有带name属性的元素值
                    // 返回的格式为:key=value&key2=value2...
                    // key表示的name的属性值，value表示的表单元素的值(服务器的值)
                    console.log(str);
                    console.log($("form").serialize());
                });
            });
        </script>

    </head>
    <body>
        <form action="success.html">
            用户名: <input type="text" name="username"><br>
            密码: <input type="password" name="password"><br>
            电话: <input type="text" name="phone"><br>
            地址: <input type="text" name="address"><br>
            <!--<input type="submit" value="提交">-->
            <input type="button" value="提交" id="btn">
        </form>
    </body>
</html>